<template>
  <div class="airpod">
   <table class="demo-border">
    <tbody>
      <div class="content">
      <h3 class="airpod_info">欢迎{{ userName }}同学进入MBTI测试系统</h3>
      <h3 class="airpod_info2">MBTI测试前须知</h3>
      <span class="education_count iconfont">1、参加测试的人员请务必诚实、独立地回答问题，只有如此，才能得到有效的结果。 
                                            2、《性格分析报告》展示的是你的性格倾向，而不是你的知识、技能、经验。 
                                            3、MBTI提供的性格类型描述仅供测试者确定自己的性格类型之用，性格类型没有好坏，只有不同。每一种性格特征都有其价值和优点，也有缺点和需要注意的地方。清楚地了解自己的性格优劣势，有利于更好地发挥自己的特长，而尽可能的在为人处事中避免自己性格中的劣势，更好地和他人相处，更好地作重要的决策。</span>
    </div>
    </tbody>
  </table>
  </div>
</template>
<style scoped>
.airpod {
  position: relative;
  width: 100%;
  height: 80vh;
  background: url(../assets/demo2.jpg) no-repeat;
  background-position: center;
  background-size:cover;
}
.content {
  position: absolute;
  top: 30%;
  left: 40%;
  margin-left: -150px;
  margin-top: -100px;
}

.airpod .airpod_info,
.airpod .airpod_info2,
.education_count {
  color: black;
  font-weight: 500;
  font-size: 26px;
  text-align: center;
  margin: auto;
}
.education_count {
  display: block;
}
.airpod .airpod_info2 {
  padding-bottom: 10px;
}

.demo-border .text {
  width: 15%;
}
.demo-border .line {
  width: 70%;
}
.demo-border .line div {
  width: 100%;
  height: 0;
  border-top: 1px solid var(--el-border-color);
}
.demo-border .line .dashed {
  border-top: 2px dashed var(--el-border-color);
}
</style>
<script>
import { ref } from 'vue'
export default {
  data() {
    return {
      userName: ref(''),
    }
  },
  created() {
    this.userData()
  },
  methods: {
    userData() {
      const userData = window.localStorage.getItem('userdata')
      this.userName = userData
    },
  },
}
</script>
